<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>echarts疫情地图分布</title>
    <script src="/static/js/echarts.min.js"></script>
    <!--echarts地图只能用这个3.0的版本-->
    <script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<style>
    #map {
        width: 80%;
        height: 800px;
    }

    #box {
        width: 80%;
        box-shadow: 0 0 1.333vw rgba(0, 0, 0, .1);
        margin: 0 auto
    }

    .chinamapbtns {
        left: 5.333vw;
        top: 0;
        float: left;
        z-index: 2;
        height: 6.933vw;
    }

    .chinamapbtns span {
        display: block;
        width: 10.067vw;
        line-height: normal;
        text-align: center;
        font-size: 1.5vw;
        padding: .8vw 0;
        border: 1px solid #efefef;
        float: left;
        position: relative;
        margin: 0 -1px;
        z-index: 10;

    }

    .chinamapbtns span:first-child {
        border-radius: 1.6vw 0 0 1.6vw;
    }

    .chinamapbtns span:last-child {
        border-radius: 0 1.6vw 1.6vw 0;
    }

    .current {
        background-color: #eef4ff;
        border-color: #ccdeff;
        color: #005dff;
    }

</style>

<body>
<div id="box">
    <div class="chinamapbtns">
        <span class="current">现有确诊</span>
        <span class="">累计确诊</span>
    </div>
    <!--基础地图显示-->
    <div id="map"></div>
</div>
<script>
    var data_now = [{% for province in epidemic %}
        {name: "{{ province.name }}", value:{{province.nowConfirm}}},
    {% endfor %}
    ];
    var data_total = [{% for province in epidemic %}
        {name: "{{ province.name }}", value:{{province.confirm}}},
    {% endfor %}
    ];
    var now_sapn = $("span:first");
    var total_span = $("span:last");
    var now_format = "{b}<br/>现有确诊：{c}";
    var total_format = '{b}<br/>累计确诊：{c}';
    var option = {
        // 提示工具
        tooltip: {
            show: true,
            // 数据格式自定义为 item
            trigger: 'item',
            formatter: now_format,
            // 提示框内边距
            padding: 20,
            // 提示框出现方式:鼠标点击时
            triggerOn: 'click',
            // 额外赋css样式
            extraCssText: 'text-align:center'
        },
        visualMap: {
            // 分布的方式为: 整个块领域
            type: 'piecewise',
            /* min: 0,
            max: 10000,
            splitNumber:5,
            inRange: {
                color: ['#e2ebf4', '#ffe7b2', '#ffcea0', '#ffa577', '#ff6341', '#ff2736', '#de1f05']
            }*/
            // 值的范围(min最小值,label显示文字,color区域显示的颜色)
            pieces: [
                {min: 1000, label: '10000人及以上', color: '#de1f05'},
                {min: 1000, max: 9999, color: '#ff2736', label: '1000-9999人'},
                {min: 500, max: 999, color: '#ff6341', label: '500-999人'},
                {min: 100, max: 499, color: '#ffa577', label: '100-499人'},
                {min: 10, max: 99, color: '#ffcea0', label: '10-99人'},
                {min: 1, max: 9, color: '#ffe7b2', label: '1-9'},
                {value: 0, color: '#e2ebf4', label: '0人'}
            ]
        },
        series: [{
            type: 'map',
            map: 'china',
            roam: false,
            // 地图上显示文字
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },

            layoutCenter: ['58%', '40%'],
            layoutSize: '100%',
            data: data_now,
            // 自定义名称映射
            /*
            nameMap: {
                '黑龙江': '黑龙江省',
                '北京': '北京市',
                '天津': '天津市',
                '河北': '河北省',
                '山西': '山西省',
                '内蒙古': '内蒙古自治区',
                '辽宁': '辽宁省',
                '吉林': '吉林省',
                '上海': '上海市',
                '江苏': '江苏省',
                '浙江': '浙江省',
                '安徽': '安徽省',
                '福建': '福建省',
                '江西': '江西省',
                '山东': '山东省',
                '河南': '河南省',
                '湖北': '湖北省',
                '湖南': '湖南省',
                '广东': '广东省',
                '广西': '广西自治区',
                '海南': '海南省',
                '重庆': '重庆市',
                '四川': '四川省',
                '贵州': '贵州省',
                '云南': '云南省',
                '西藏': '西藏自治区',
                '陕西': '陕西省',
                '甘肃': '甘肃省',
                '青海': '青海',
                '宁夏': '宁夏自治区',
                '新疆': '新疆自治区',
                '台湾': '台湾省',
                '澳门': '澳门区',
                '香港': '香港区',
                '青海': '青海省'
            }
            */


        }]
    };
    var myEcharts = echarts.init(document.getElementById("map"))

    $.get('/static/json/china.json', function (csJson) { //引入你需要绘画的地图json表
        echarts.registerMap('china', csJson);
        myEcharts.setOption(option)
    });

    now_sapn.click(function () {
        option.series[0].data = data_now;
        option.tooltip.formatter = now_format;
        myEcharts.setOption(option);
        this.setAttribute("class", "current")
        total_span.removeAttr("class")
    });

    total_span.click(function () {
        option.series[0].data = data_total;
        option.tooltip.formatter = total_format;
        myEcharts.setOption(option);
        this.setAttribute("class", "current")
        now_sapn.removeAttr("class")
    });
</script>
</body>